<template>
  <view class="charging-pile-content">

    <!-- 暂未购买状态 -->
    <view v-if="currentPileStatus === 0" class="status-card1 not-purchased">
      <view class="status-content">
        <text class="status-title1">暂未购买</text>
      </view>
    </view>


    <!-- 预约安装状态 -->
    <view v-else-if="[10, 11, 12, 20].includes(currentPileStatus)" class="status-card appointment">
      <view class="appointment-header">
        <view class="appointment-left">
          <view class="status-title-row">
            <view class="status-indicator orange"></view>
            <text class="status-title">预约安装</text>
          </view>
          <view class="pile-info">
            <text class="pile-location">{{ pileData.location }}</text>
            <!--						<text class="pile-number">充电桩编号：{{ pileData.number }}</text>-->
          </view>
        </view>
        <view class="appointment-right">
          <image class="pile-image-appointment"
                 src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/pile.png"
                 mode="aspectFit"></image>
        </view>
      </view>
      <view class="appointment-info">
        <text class="info-label">预约信息</text>
        <view class="info-item" @click="showDateSelector">
          <text :class="selectedDate ? 'info-text-selected' : 'info-text'">{{ selectedDate || '请选择预约安装时间' }}</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>

      </view>
      <button class="action-btn appointment-btn" @click="makeAppointment">预约安装</button>
    </view>

    <!-- 安装中状态 -->
    <view v-else-if="currentPileStatus === 21" class="status-card installing">

      <view class="appointment-header">
        <view class="appointment-left">
          <view class="status-title-row">
            <view class="status-indicator orange"></view>
            <text class="status-title">安装中</text>
          </view>
          <view class="pile-info">
            <text class="pile-location">{{ pileData.location }}</text>
            <text class="pile-number">充电桩编号：{{ pileData.number }}</text>
          </view>
        </view>
        <view class="appointment-right">
          <image class="pile-image-appointment"
                 src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/pile%402x.png"
                 mode="aspectFit"></image>
        </view>
      </view>


      <view class="appointment-info">
        <text class="info-label">预约信息</text>
        <view class="info-row">
          <text class="info-text">预约安装时间：{{
              DateUtils.formatDate(installData.appointmentTime, 'YYYY-MM-DD HH:mm')
            }}
          </text>
        </view>
        <view class="info-row">
          <text class="info-text">安装师傅：{{ installData.userName }}</text>
        </view>
        <view class="info-row">
          <text class="info-text">安装师傅电话：{{ installData.phone }}</text>
        </view>
        <view class="usage-status">
          <text class="usage-label">我的充电桩使用状态</text>
          <text class="usage-value">充电中</text>
        </view>
      </view>
    </view>

    <!-- 安装完成状态 -->
    <view v-else-if="currentPileStatus === 4" class="status-card completed">
      <!-- 头部采用与“安装中”一致的布局 -->
      <view class="appointment-header">
        <view class="appointment-left">
          <view class="status-title-row">
            <view class="status-indicator green"></view>
            <text class="status-title">安装完成</text>
          </view>
          <view class="pile-info">
            <text class="pile-location">{{ pileData.location }}</text>
            <text class="pile-number">充电桩编号：{{ pileData.number }}</text>
          </view>
        </view>
        <view class="appointment-right">
          <image class="pile-image-appointment"
                 src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/pile%402x.png"
                 mode="aspectFit"></image>
        </view>
      </view>

      <!-- 安装完成信息区 -->
      <view class="appointment-info">
        <text class="info-label">预约信息</text>
        <view class="info-row">
          <text class="info-text">预计正式运营时间：{{ installData.operationTime }}</text>
        </view>
        <view class="info-row">
          <text class="info-text">安装时间：{{ installData.installTime }}</text>
        </view>
        <view class="info-row">
          <text class="info-text">安装师傅：{{ installData.installer }}</text>
        </view>
        <view class="info-row">
          <text class="info-text">安装师傅电话：{{ installData.installerPhone }}</text>
        </view>
        <view class="usage-status">
          <text class="usage-label">我的充电桩使用状态</text>
          <text class="usage-value">充电中</text>
        </view>
      </view>
      <button class="action-btn operation-btn" @click="startOperation">正式运营</button>
    </view>

    <!-- 空闲中状态（运营中） -->
    <view v-else-if="currentPileStatus === 30" class="status-card idle">
      <view class="appointment-headerFree idle-header">
        <view class="appointment-left">
          <view class="status-title-row">
            <view class="status-indicator green"></view>
            <text class="status-title">空闲中</text>
          </view>
          <view class="pile-info">
            <text class="pile-location">{{ pileData.location }}</text>
            <text class="pile-number">充电桩编号：{{ pileData.number }}</text>
          </view>
        </view>
      </view>
      <!-- 开始/预约充电操作区 -->
      <button class="action-btn start-charge-btn" @click="startCharge">开始充电</button>
      <view class="reserve-link" @click="reserveCharge">预约充电</view>
    </view>
    <!-- 邀请他人充电卡片（浮层，最外层） -->
    <view v-if="currentPileStatus === 30" class="invite-card invite-card-floatingte-card invite-card-floating"
          @click="inviteOther">
      <text class="invite-text">邀请他人充电</text>
      <view class="invite-icon-wrap">
        <image class="invite-icon" src="/static/images/yaoqing.png" mode="widthFix"/>
      </view>
    </view>
    <!-- 充电中状态 -->
    <view v-else-if="currentPileStatus === 31" class="status-card charging">
      <view class="appointment-headerCharging">
        <view class="appointment-left">
          <view class="status-title-row">
            <view class="status-indicator green"></view>
            <text class="status-title">充电中</text>
          </view>
          <view class="pile-info">
            <text class="pile-location">{{ pileData.location }}</text>
            <text class="pile-number">充电桩编号：{{ pileData.number }}</text>
          </view>
        </view>
      </view>
      <!-- 明细 -->
      <view class="detail-list">
        <view class="detail-row">
          <text class="detail-label">我的权益</text>
          <text class="detail-value">{{ chargingData.power }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">开始充电时间</text>
          <text class="detail-value">{{ chargingData.startTime }}</text>
        </view>


      </view>


      <button class="action-btn start-charge-btn" @click="endCharge">结束充电</button>
      <view class="reserve-link" @click="reserveCharge">预约充电</view>


    </view>

    <!-- 共享充电中状态 -->
    <view v-else-if="currentPileStatus === 32" class="status-card charging">
      <view class="appointment-headerCharging">
        <view class="appointment-left">
          <view class="status-title-row">
            <view class="status-indicator green"></view>
            <text class="status-title">共享充电中</text>
          </view>
          <view class="pile-info">
            <text class="pile-location">{{ pileData.location }}</text>
            <text class="pile-number">充电桩编号：{{ pileData.number }}</text>
          </view>
        </view>
      </view>
      <!-- 明细 -->
      <view class="detail-list">
        <view class="detail-row">
          <text class="detail-label">共享充电车辆</text>
          <text class="detail-value">{{ chargingData.sharedVehicle }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">开始充电时间</text>
          <text class="detail-value">{{ chargingData.startTime }}</text>
        </view>


      </view>


      <button class="action-btn start-charge-btn" @click="notifyTow">通知挪车</button>
      <view class="reserve-link" @click="reserveCharge">预约充电</view>


    </view>


    <!-- 底部促销卡片 -->
    <view class="promotion-card" v-if="[0, 21].includes(currentPileStatus)" @click="goToActivity">
      <view class="promotion-image"></view>
    </view>

    <view class="hidden-datetime-picker">
      <uni-datetime-picker

          ref="datetimePicker"
          type="date"
          :value="selectedDate"
          @change="onDateTimeChange"
          :start="minDate"
          :end="maxDate"
          :hide-second="true"
          return-type="string"
      />
    </view>


    <!-- 半环进度浮层（最外层） -->
    <view v-if="currentPileStatus === 31 || currentPileStatus === 32" class="progress-floating">

      <view class="semi-ring">
        <svg class="semi-svg" viewBox="0 0 300 160" width="100%" height="160">
          <path d="M 30 150 A 120 120 0 0 1 270 150" class="semi-bg" pathLength="100"/>
          <path d="M 30 150 A 120 120 0 0 1 270 150" class="semi-fg" pathLength="100"
                :style="{ strokeDasharray: semiDashArray }"/>
        </svg>
        <text class="progress-label">预计完成时间</text>
        <text class="progress-time">{{ chargingData.expectedFinishTime }}</text>
        <text class="progress-subtext">{{ chargingData.elapsed }}，{{ chargingData.remaining }}</text>
        <image class="car-image" src="/static/images/car_group.png" mode="widthFix"></image>
      </view>
      <!-- 充电汇总：位于 car_group.png 下方 -->
      <view v-if="currentPileStatus === 31" class="charge-summary">
        <view class="summary-item">
          <view class="summary-texts">
            <view class="summary-main">
              <image class="summary-icon" src="/static/images/ico_recharge.png" mode="widthFix"></image>
              <text class="summary-value">{{ chargingData.chargedKwh }}</text>
            </view>
            <text class="summary-label">已充电量(度)</text>
          </view>
        </view>
      </view>
      <view v-if="currentPileStatus === 32" class="charge-summary">
        <view class="summary-item">
          <view class="summary-texts">
            <view class="summary-main">
              <image class="summary-icon" src="/static/images/ico_recharge.png" mode="widthFix"></image>
              <text class="summary-value">{{ chargingData.chargedKwh }}</text>
            </view>
            <text class="summary-label">已充电量(度)</text>
          </view>
        </view>
        <view class="summary-item">
          <view class="summary-texts">
            <view class="summary-main">
              <image class="summary-icon" src="/static/images/ico_money.png" mode="widthFix"></image>
              <text class="summary-value">{{ chargingData.chargedFee }}</text>
            </view>
            <text class="summary-label">已充电费(元)</text>
          </view>
        </view>
        <view class="summary-item" v-if="currentPileStatus === 32">
          <view class="summary-texts">
            <view class="summary-main">
              <image class="summary-icon" src="/static/images/ico_money.png" mode="widthFix"></image>
              <text class="summary-value">{{ chargingData.commissionFee }}</text>
            </view>
            <text class="summary-label">已产生分成费(元)</text>
          </view>
        </view>
      </view>


    </view>

  </view>
</template>

<script setup>
import {ref, onMounted, watch, computed} from 'vue';
import PileApi from '@/api/pile/pile.js';
import DateUtils from '@/utils/dateUtils.js';

// 定义 props 接收传递的参数
const props = defineProps({
  pileStatus: {
    type: [String, Number],
    default: '1'
  }
});

// 定义事件发射
const emit = defineEmits(['show-auth-modal']);

// 内部状态管理
const currentPileStatus = ref(1);
const selectedDate = ref(''); // 选择的预约日期
const datetimePicker = ref(null); // 日期时间选择器引用
const minDate = ref(''); // 最小日期
const maxDate = ref(''); // 最大日期

// 获取URL参数
const getUrlParams = () => {
  const pages = getCurrentPages();
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1];
    const options = currentPage.options || {};
    return options;
  }
  return {};
};

// 初始化状态
const initializeStatus = () => {
  const urlParams = getUrlParams();
  const urlPileStatus = urlParams.pileStatus;
  // 设置初始默认值，API返回的数据会覆盖这个值
  // 优先使用URL参数，其次使用props，最后使用默认值
  if (urlPileStatus !== undefined && urlPileStatus !== null && urlPileStatus !== '') {
    currentPileStatus.value = Number(urlPileStatus);
  } else if (props.pileStatus !== undefined && props.pileStatus !== null && props.pileStatus !== '') {
    currentPileStatus.value = Number(props.pileStatus);
  } else {
    // currentPileStatus.value = 0;
  }

  // 如果状态为1，显示认证弹窗
  // 注意：API返回的状态会在fetchMyPileInfo中处理弹窗显示
  showModalByStatus(currentPileStatus.value);
};

const showModalByStatus = (status) => {
  const s = Number(status);
  if (s === 10) {
    setTimeout(() => {
      showAuthModal();
    }, 100);
  } else if (s === 11) {
    setTimeout(() => {
      showAuthModal2();
    }, 100);
  }
}

// 监听 props 变化
watch(() => props.pileStatus, (newVal) => {
  // 只有在没有URL参数时才使用props
  const urlParams = getUrlParams();
  if (!urlParams.pileStatus) {
    currentPileStatus.value = Number(newVal);
    showModalByStatus(currentPileStatus.value);
  }
});

// 充电桩数据
const pileData = ref({
  location: '新宇创谷A区充电站-1号充电桩',
  number: '0987654321',
  appointmentTime: '2025-09-10 09:00',
  installer: '张师傅',
  installerPhone: '12345678900',
  installTime: '2025-09-10 09:00',
  operationTime: '2025-09-12 09:00'
});

const installData = ref({})

// 充电中数据（示例值，可由接口覆盖）
const chargingData = ref({
  expectedFinishTime: '13:48',
  elapsed: '已充1:02:00',
  remaining: '预计剩余18分钟',
  startTime: '2025-10-20 10:00:00',
  power: '128W',
  voltage: '220V',
  serviceFee: '¥20.02',
  occupancyFee: '¥0.00',
  chargedKwh: '50.00',
  chargedFee: '50.00',
  commissionFee: '5.00',
  sharedVehicle: '皖A88888',
  progress: 0.65
});

// 半环进度参数
const semiDashArray = computed(() => `${Math.max(0, Math.min(1, chargingData.value.progress)) * 100} 100`);

// 跳转到认证页面
const goToCertification = () => {
  uni.navigateTo({
    url: '/pages/activity/shared-pile/certification'
  })
}

// 预约安装方法
const makeAppointment = async () => {
  if (Number(currentPileStatus.value) === 10) {
    // 状态为1时弹出认证弹窗
    showAuthModal();
    return;
  }

  if (Number(currentPileStatus.value) === 11) {
    showAuthModal2();
    return;
  }

  if (Number(currentPileStatus.value) !== 20) {
    // 其他状态的处理
    uni.showToast({
      title: '当前状态不支持预约',
      icon: 'none'
    });
    return;
  }

  // 校验是否已选择日期
  if (!selectedDate.value) {
    uni.showToast({
      title: '请先选择预约时间',
      icon: 'none'
    });
    return;
  }

  // 调用预约接口
  const data = await PileApi.appointment(selectedDate.value);
  uni.showToast({
    title: '预约成功',
    icon: 'success'
  });
  // 重新获取充电桩信息
//   setTimeout(() => {
//     fetchMyPileInfo();
//   }, 1000);
};

// 开始正式运营
const startOperation = () => {
  uni.showToast({
    title: '正式运营功能开发中',
    icon: 'none'
  });
};

// 显示认证弹窗 - 通过事件发射给父组件
const showAuthModal = () => {
  emit('show-auth-modal', {type: 'auth', showType: 1});
};
const showAuthModal2 = () => {
  emit('show-auth-modal', {type: 'auth2', showType: 2});
};

// 开始认证
const startAuth = () => {
  // uni.showToast({
  // 	title: '认证功能开发中',
  // 	icon: 'none'
  // });
  uni.navigateTo({
    url: '/pages/activity/shared-pile/certification'
  })
};

// 跳转到活动页面
const goToActivity = () => {
  uni.navigateTo({
    url: '/pages/activity/index'
  });
};

// 邀请他人充电
const inviteOther = () => {
  uni.showToast({title: '邀请功能开发中', icon: 'none'});
};

// 开始充电
const startCharge = () => {
  uni.showToast({title: '开始充电功能开发中', icon: 'none'});
};

// 结束充电
const endCharge = () => {
  uni.showToast({title: '结束充电功能开发中', icon: 'none'});
};

// 查看收费时段
const viewChargeDetail = () => {
  uni.showToast({title: '查看收费时段功能开发中', icon: 'none'});
};

// 预约充电
const reserveCharge = () => {
  uni.showModal({
    title: '预约充电',
    content: '请选择预约时间段',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};

// 通知挪车
const notifyTow = () => {
  uni.showToast({title: '已短信通知车主', icon: 'none'});
};

// 获取我的充电桩信息
// const fetchMyPileInfo = async () => {
// 	try {
// 		const data = await PileApi.getMyPileInfo();
//     pileData.value = data;
//     currentPileStatus.value = data.pileStatus;
//     // 如果状态为1，显示认证弹窗
//     showModalByStatus(currentPileStatus.value);

//     if ([21].includes(currentPileStatus.value)){
//       installData.value = data.extendData;
//     }


// 	} catch (error) {
// 		console.error('获取充电桩信息异常:', error);
// 	}
// };

// 初始化日期范围
const initializeDateRange = () => {
  const today = new Date();
  // 设置最小日期为明天
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate());
  minDate.value = tomorrow.toISOString().split('T')[0];

  // 设置最大日期为7天后
  const maxDateObj = new Date(today);
  maxDateObj.setDate(today.getDate() + 120);
  maxDate.value = maxDateObj.toISOString().split('T')[0];
};

// 显示日期选择器
const showDateSelector = () => {
  if (datetimePicker.value) {
    datetimePicker.value.show();
  }
};

// 日期时间选择器值改变
const onDateTimeChange = (e) => {
  selectedDate.value = e;
};

// 组件挂载后初始化状态
onMounted(() => {
  initializeStatus();
  // 调用API获取充电桩信息
  // fetchMyPileInfo();
  // 初始化日期范围
  initializeDateRange();
});

// 暴露方法给父组件调用
defineExpose({
  initializeStatus,
  // fetchMyPileInfo,
  initializeDateRange
});
</script>

<style scoped>
/* 预约信息项样式优化 */
.info-item {
	cursor: pointer;
	transition: background-color 0.2s;
}

.info-item:active {
  background-color: #f5f5f5;
}
.charging-pile-content {
  /* padding: 30rpx; */
  padding-bottom: 250 rpx;
  height: 65vh;
  overflow: hidden;
  position: relative;
}

/* 浮层：半环进度位于顶部渐变区之上 */
.progress-floating {
  position: absolute;
  top: 200 rpx;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.semi-ring {
  position: relative;
  width: 100%;
  max-width: 680 rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-top:30px; */
  margin-bottom: 45 rpx; /* 车图底部外溢，留出空间 */
}

.semi-svg {
}

.semi-bg {
  fill: none;
  stroke: #E5F4F2;
  stroke-width: 16;
}
.semi-fg {
  fill: none;
  stroke: #1CCCB4;
  stroke-linecap: round;
  stroke-width: 16;
}



.status-card {
  border-radius: 20 rpx;
  /* padding: 40rpx 0;	 */
  margin-bottom: 30 rpx;
}

.status-card1 {
	border-radius: 20rpx;
	/* padding: 40rpx 30rpx; */
	padding-bottom: 85%;
}

.not-purchased {
	text-align: center;
}

.status-content {
	background: linear-gradient(to bottom, #fff, rgb(221, 247, 243));
	height: 320rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.status-title-row {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.status-title {
	font-size: 36rpx;
	/* font-weight: bold; */
	/* color: #333; */
	font-weight: 400;
	font-size: 70rpx;
	color: #000000;
}

.status-title1 {
  font-size: 80 rpx;
  font-weight: 530;
  color: #333;
  margin-bottom: 100 rpx;
  letter-spacing: 4 rpx;
}

/* 空闲中状态样式 */
.idle-header {
  /* 延用 appointment-header 背景与尺寸 */
}

.invite-card {
  border: 2 rpx solid #1DCFB7;
  border-radius: 4px;
  margin: 0 30 rpx 30 rpx 30 rpx;
  padding: 70 rpx 30 rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.invite-text {
  font-size: 32 rpx;
  color: #000;
}

.invite-icon-wrap {
  padding-top: 5px;
  padding-left: 10px;
  /* width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #1CCCB4;
  display: flex;
  align-items: center;
  justify-content: center; */
}

.invite-icon {
  width: 24px;
  height: 24px;
}

.start-charge-btn {
  width: 712 rpx;
  height: 88 rpx;
  background: #1CCCB4;
  border-radius: 50 rpx;
  font-weight: 500;
  font-size: 36 rpx;
  color: #FFFFFF;
  position: fixed;
  bottom: 140 rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.reserve-link {
  position: fixed;
  bottom: 80 rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #1CCCB4;
  font-size: 28 rpx;
}

.promotion-card {
  height: 200 rpx;
  /*border-radius: 20rpx;*/
  padding: 40 rpx 20 rpx;
  position: fixed;
  bottom: 60 rpx;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promotion-image {
	width: 100%;
	height: 200rpx;
	background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/banner_small%402x.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	/*border-radius: 20rpx;*/
	padding: 40rpx 30rpx;
	/* margin-bottom: 20rpx; */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.appointment-header {
  height: 320 rpx;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F8F6 100%);
  /* border-radius:20rpx;*/
  padding: 0 rpx 30 rpx 40 rpx 30 rpx;
  margin-bottom: 30 rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.appointment-headerFree {
  height: 500 rpx;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F8F6 100%);
  /* border-radius: 20rpx; */
  padding: 0 rpx 30 rpx 40 rpx 30 rpx;
  margin-bottom: 30 rpx;
  position: relative;
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
}
.appointment-headerCharging {
  height: 600 rpx;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F8F6 100%);
  /* border-radius: 20rpx; */
  padding: 0 rpx 30 rpx 40 rpx 30 rpx;
  margin-bottom: 30 rpx;
  position: relative;
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
}

.appointment-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.appointment-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-indicator {
  width: 16 rpx;
  height: 16 rpx;
  border-radius: 50%;
  margin-right: 16 rpx;
}

.status-indicator.orange {
  background-color: #FF9500;
}

.status-indicator.green {
  background-color: #34C759;
}

.pile-image-appointment {
  width: 160 rpx;
  height: 240 rpx;
}

.pile-info {
  padding-left: 32 rpx;
  margin-top: 20 rpx;
}

.pile-location {
  font-size: 28 rpx;
  color: #666;
  display: block;
  margin-bottom: 10 rpx;
}

.pile-number {
  font-size: 26 rpx;
  color: #999;
  display: block;
}

.appointment-info {
  /* background-color: #f8f9fa; */
  border-radius: 16 rpx;
  padding: 30 rpx;
  margin: -110 rpx 30 rpx 30 rpx 30 rpx;
  border: 2 rpx solid #1DCFB7;
  position: relative;
  z-index: 10;
  background: #ffffff;
}

.installation-info,
.completion-info {
  /* background-color: #f8f9fa; */
  border-radius: 16 rpx;
  padding: 30 rpx;
  margin: 0 30 rpx 30 rpx 30 rpx;
  border: 2 rpx solid #1DCFB7;
}

.info-label {
  font-size: 28 rpx;
  color: #000000;
  display: block;
  margin-bottom: 20 rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20 rpx 0;
  /*border-bottom: 1rpx solid #eee;*/
}

.info-text {
  font-size: 26 rpx;
  color: #000000;
}

.info-text-selected {
  font-size: 32 rpx;
  color: #000000;
}

.info-row {
  margin-bottom: 15 rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.usage-status {
  margin-top: 30 rpx;
  padding-top: 20 rpx;
  border-top: 1 rpx solid #eee;
}

.usage-label {
  font-size: 26 rpx;
  color: #7A7A7C;
  display: block;
  margin-bottom: 10 rpx;
}

.usage-value {
  font-size: 28 rpx;
  color: #333;
  font-weight: bold;
}

.action-btn {
  width: 100%;
  height: 88 rpx;
  border-radius: 44 rpx;
  border: none;
  font-size: 32 rpx;
  font-weight: bold;
  color: #fff;
}

.appointment-btn {
  width: 712 rpx;
  height: 88 rpx;
  background: #1CCCB4;
  border-radius: 50 rpx;
  font-weight: 500;
  font-size: 36 rpx;
  color: #FFFFFF;
  position: fixed;
  bottom: 60 rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.operation-btn {
  background: linear-gradient(135deg, #BAEFE8 0%, #BAEFE8 100%);
}

.hidden-datetime-picker {
  padding-top: 900px;
  /* opacity: 0; */
}

.invite-card-floating {
  position: absolute;
  top: 450 rpx;
  left: 0;
  right: 0;
  z-index: 20;
}

/* 充电中：进度、汇总、明细 */
.charging-progress {
  margin: 0 30 rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-label {
  position: absolute;
  top: 100 rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26 rpx;
  color: #7A7A7C;
}

.progress-ring {
  position: relative;
  width: 360 rpx;
  height: 360 rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-svg {
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: #E5F4F2;
  stroke-width: 16;
}

.ring-fg {
  fill: none;
  stroke: #1CCCB4;
  stroke-linecap: round;
  stroke-width: 16;
}

.progress-time {
  position: absolute;
  top: 130 rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 64 rpx;
  font-weight: 600;
  color: #000;
}

.progress-subtext {
  position: absolute;
  bottom: 60 rpx;
  top: 220 rpx;
  left: 47%;
  transform: translateX(-50%);
  font-size: 26 rpx;
  color: #333;
}

.car-image {
  position: absolute;
  bottom: -55 rpx;
  width: 300 rpx;

}

.charge-summary {
  margin: 30 rpx;
  border: 2 rpx solid #1DCFB7;
  border-radius: 16 rpx;
  display: flex;
  justify-content: space-between;
  padding: 20 rpx;
  background-color: #fff;
  height: 80px;
}

/* 浮层中的汇总卡片：更紧凑的上边距与居中宽度 */
.progress-floating .charge-summary {
  width: 100%;
  max-width: 680 rpx;
  margin: 0 30 rpx 0;
  margin-top: 10 rpx;
}

.summary-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16 rpx;
  justify-content: center;
}

.summaryShare-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16 rpx;
  justify-content: center;
}

.summary-item + .summary-item {
  border-left: 2 rpx solid #E6F3F1;
  padding-left: 20 rpx;
}

.summary-icon {
  width: 36 rpx;
  height: 36 rpx;
}

.summary-texts {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summary-main {
  display: flex;
  align-items: center;
  gap: 12 rpx;
}

.summary-value {
  font-size: 36 rpx;
  color: #000;
  font-weight: 600;
}

.summary-label {
  font-size: 26 rpx;
  color: #7A7A7C;
}

.detail-list {
  margin: 0 30 rpx;
  /* border: 2rpx solid #1DCFB7;
  border-radius: 16rpx; */
  padding: 20 rpx;
  margin-top: 120 rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 12 rpx 0;
}

.detail-label {
  font-size: 26 rpx;
  color: #7A7A7C;
}

.detail-value {
  font-size: 26 rpx;
  color: #000000;
}

.charge-link {
  color: #1CCCB4;
  font-size: 28 rpx;
  margin: 20 rpx 30 rpx;
}

.end-charge-btn {
  width: 712 rpx;
  height: 88 rpx;
  background: #1CCCB4;
  border-radius: 50 rpx;
  font-weight: 500;
  font-size: 36 rpx;
  color: #FFFFFF;
  position: fixed;
  bottom: 80 rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
</style>



